<template>
  <div class="bgimg" :style="{width:size+'px',height:size+'px'}" @mouseover="mouseoverHandel" @mouseleave="mouseleaveHandel">
    <el-image v-show="!isOver" :style="{width:size+'px',height:size+'px'}" :src="baseImg" fit="cover" />
    <el-image v-show="isOver"   :style="{width:size+'px',height:size+'px'}" :src="activeImg" fit="cover" />
  </div>
</template>

<script>
export default {
  props: {
    size:{
      style: String,
      default: "65",
    },
    baseImg: {
      style: String,
      default: "",
    },
    activeImg: {
      style: String,
      default: "",
    },
  },
  data(){
    return {
        isOver:false
    }
  },
  methods:{
    mouseoverHandel(){
       if(!this.isOver) {
        this.isOver = true
       }
    },
    mouseleaveHandel(){
        this.isOver = false
    }
  }
};
</script>

<style lang="scss" scoped>
.bgimg{
    cursor: pointer;
}

</style>